{% extends "base.html" %}

{% block title %}
  {% for identity in person.identity_set %}
    {{identity.name}}
  {% endfor %}
{% endblock %}

{% block content %}
  <script language="javascript">
  function swap(old_id, new_id) {
    document.getElementById(old_id).style.display = 'none';
    document.getElementById(new_id).style.display = 'inline';
  };
  </script>
  <form action="/user/remove_person" method="{{submit_method}}">
    <input type="hidden" name="xsrf_token" value="{{xsrf_token}}" />
    <input type="hidden" name="key" value="{{person.key}}" />
    <input type="submit" value="Remove Person" />
  </form>
  <ul class="identities">
    {% for identity in identities %}
      <li>
        <span class="name">{{identity.name}}</span>
        <form action="/user/remove_identity" method="{{submit_method}}">
          <input type="hidden" name="xsrf_token" value="{{xsrf_token}}" />
          <input type="hidden" name="key" value="{{identity.key}}" />
          <input type="submit" value="Remove Identity" />
        </form>
      </li>
    {% endfor %}
    <li>
      <form action="/user/add_identity" method="{{submit_method}}">
        <input type="hidden" name="xsrf_token" value="{{xsrf_token}}" />
        <input type="hidden" name="key" value="{{person.key}}" />
        <input type="text" name="name" />
        <input type="submit" value="Add Identity" />
      </form>
    </li>
  </ul>
  {# Stupidest conditional ever. #}
  <div class="born">
    Born:
    {% with person.birth_year as year %}
    {% with person.birth_month as month %}
    {% with person.birth_day as day %}
    <span class="date" id="born-static">
      {% include "date.html" %}
      <input type="button" value="Edit" onclick="swap('born-static', 'born-edit');" />
    </span>
    <span class="date" id="born-edit" style="display: none">
      <form action="/user/set_birth" method="{{submit_method}}">
        <input type="hidden" name="xsrf_token" value="{{xsrf_token}}" />
        <input type="hidden" name="key" value="{{person.key}}" />
        {% include "date_picker.html" %}
        <input type="submit" value="Save" />
      </form>
    </span>
    {% endwith %}
    {% endwith %}
    {% endwith %}
  </div>
  <div class="died">
    Died:
    {% with person.death_year as year %}
    {% with person.death_month as month %}
    {% with person.death_day as day %}
    <span class="date" id="died-static">
      {% include "date.html" %}
      <input type="button" value="Edit" onclick="swap('died-static', 'died-edit');" />
    </span>
    <span class="date" id="died-edit" style="display: none">
      <form action="/user/set_death" method="{{submit_method}}">
        <input type="hidden" name="xsrf_token" value="{{xsrf_token}}" />
        <input type="hidden" name="key" value="{{person.key}}" />
        {% include "date_picker.html" %}
        <input type="submit" value="Save" />
      </form>
    </span>
    {% endwith %}
    {% endwith %}
    {% endwith %}
  </div>
  <div class="gender">
    Biological gender:
    <span class="gender" id="gender-static">
      {{person.biological_gender|default:"?"}}
      <input type="button" value="Edit" onclick="swap('gender-static', 'gender-edit');" />
    </span>
    <span class="gender" id="gender-edit" style="display: none">
      <form action="/user/set_gender" method="{{submit_method}}">
        <input type="hidden" name="xsrf_token" value="{{xsrf_token}}" />
        <input type="hidden" name="key" value="{{person.key}}" />
        <select name="biological_gender" value="Male">
          <option value="Female"{% if person.biological_gender == "Female" %} selected="yes"{% endif %}>Female</option>
          <option value="Male"{% if person.biological_gender == "Male" %} selected="yes"{% endif %}>Male</option>
          <option value="Intersex"{% if person.biological_gender == "Intersex" %} selected="yes"{% endif %}>Intersex</option>
          <option value="Unknown"{% if not person.biological_gender %} selected="yes"{% endif %}>Unknown</option>
        </select>
        <input type="submit" value="Save" />
      </form>
    </span>
  </div>
  <div class="history">
    Change history:
      <ol class="history">
        {% for change in changes %}
          <li><span class="change">{{change|safe}}</span></li>
        {% endfor %}
      </ol>
  </div>
{% endblock %}
